//具体的属性排序可以按照以下的规则：
//
//定位属性: position, float, z-index, clear
//盒模型相关属性: padding, margin, display, width, height, border
//字体相关
//CSS2 视觉相关属性 (background)
//CSS3 属性 (border-radius, box-shadow)

// Day 1
@normal-screen-width: 960px;

body {
	background-image: url(../img/bg5.jpg);
	/*使背景图不随页面的滚动而滚动*/
	background-attachment: fixed;
	/*使背景图始终填满整个屏幕*/
	background-size: cover;
	/*background-position: center; 使背景图居中*/
	background-position: center;
}


body {
  font-family: 'Open Sans','helvetica',arial,sans-serif;
  font-weight: 300;
  color: #62686f;
}

h1, h2, h3, h4, h5, h6 {
  color: #333;
  font-weight: 300;
}

.container {
	/*width: 960px 设置外包围框的宽度。*/
	width: @normal-screen-width;
	/*margin: 0 auto 让浏览器自动计算左右 margin，使外包围框居中。
    这个居中技巧只限于有设置宽度的容器。
  {top bottom} {left right}*/
	margin: 0 auto;
	
    .main-header {
    
        margin-top: 120px;
        padding: 1px;
        text-align: center;
        background-image: url(../img/banner.jpg);
        
        .main-header__avatar {
            display: block;
            margin: 0 auto;
            margin-top: -70px;
            margin-bottom: 10px;
            
            border: 3px solid white;
            border-radius: 999px;
            box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2);
        }
        
        h1{
            margin-bottom: 20px;
            font-weight: 300;
            font-size: 50px;
            font-family: 'Open Sans','helvetica',arial,sans-serif;
            
            color:#FFFFFF;
            text-shadow: 0 1px rgba(0,0,0,0.3);
        }
    }
    
    .main-nav {
        background-color: #333;
        text-align: center;
        padding: 1px;
        margin: 0;
        ul {
            margin: 0px;
            padding: 1px; 
            padding-bottom: 10px; 
            li {
                margin: 0px 5px;
                display: inline-block;
                padding-top: 5px;
                padding-bottom: 0px;
    
                a {
                    color: #fff;
                    font-size: 0.9rem;
                    font-weight: 300;
                    text-transform: uppercase;
                    text-decoration: none;
                }
                
                a:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    
    // Day 2
    .info-section {
        
        background-color: #fff;
//      padding: 1px;
        padding: 10px;
        text-align: center;
        
        header {
            h2 {
                font-size: 28px;
                text-transform: uppercase;
                letter-spacing: 3px;
            }
            h2:after {
                width: 80px;
                margin: 12px auto;
                content: "";
                display: block;
                border-bottom: 3px solid black;
            }
            margin-bottom: 30px;
        }
        
        .info-section__description {
            font-style: italic;
        }
        
        // CSS 设计模型 - 用 clear 撑高容器 2/2 两种方法之二
//      .clearfix:after {
//          content:"";
//          display:table;
//          clear:both;
//      }

        .whatido__skill-list {
            list-style: none;
            padding: 0 30px;
            margin: 0;
           
            // CSS 设计模型 - 用 Float 布局来占满父容器的宽度 1/2 两种方法之一
            overflow: hidden;
            * {
                box-sizing: border-box;
            }     
            
            .whatido__skill {
                margin-bottom: 20px;
                padding: 90px 20px;
                padding-bottom: 20px;
                float:left;
                width: 33.3%;
            }       
            .whatido__skill--code {
                background-image: url(../img/skill-code.png);
                background-repeat: no-repeat;
                background-position: center top;
            }
            
            .whatido__skill--design {
                background-image: url(../img/skill-design.png);
                background-repeat: no-repeat;
                background-position: center top;
            }
            
            .whatido__skill--product {
                background-image: url(../img/skill-product.png);
                background-repeat: no-repeat;
                background-position: center top;
            }            

       }
       
       // Day 3
       .education-experience__list {
           list-style: none;
           padding: 0 50px;
           margin: 0px;
           li {
               img {
                   float: left;
                   width: 180px;
               }
               .education-experience__list__description {
                   overflow: hidden;
                   margin: 0 60px;
                   padding-left: 60px;
                   padding-bottom: 50px;
               }
               
               display: block;
               clear: both;
           }
       }
       
       .photos__list {
            list-style: none;
            padding: 0 25px;
            margin: 0;           
            overflow: hidden;
            li {
//              *, *:before, *:after {
                * {
                    box-sizing: border-box;
                }
                img {
                    float: left;
                    width: 25%;
                    padding: 10px;              
                }
            }
        }

        // Day 4
        .get-in-touch__list {
            list-style: none;
            padding: 0 50px;
            margin: 0 auto;           
            overflow: hidden; 
            * {
                box-sizing: border-box;
            }
            li {
                float: left;
                display: block;
                padding: 10px;
                width: 25%;
            }
        }
        
       
        
    
    } // the end of info-section {

    .contact {
//      position: absolute;
//      width: 100%;

        form {
            width: 40%;
            margin: 10px auto;
//          position: relative;
            div {
                position: relative;
            }            
        }
        input, textarea {
            margin: 10px auto;
            
            border: 1px solid #ccc;
            border-radius: 4px;
            top: 0%;
            left: 100%;
            width: 100%;
        }  
        
        button {
            
            margin: 10px auto;
            margin-bottom: 50px;
            padding: 5px;
            
            width: 100%;
            border: none;
            border-radius: 9999px;
            
            background: #ffd524;
            
            cursor: pointer;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
            color: #fff;
            box-shadow: 0 3px 0 #daae1d;
        }  
        
        label {
            position: absolute;
            top: 0%;
            right: 100%;
            
            margin: 10px auto;
            margin-right: 5px;
        }
    }

 
    
} // the end of .container {

// Day 5
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 959px) {
    .container {
        width: 100%;
        .main-header h1 {
            font-size: 32px
        }
        
        .main-nav ul {
            padding: 0px;
            li {
                display: block;
            }
        }
    
        .info-section .whatido__skill-list .whatido__skill {
            width: 100%;
        }
    
        .info-section header h2 {
            span {
                display: block;
            }
        }
    
        .info-section .education-experience__list{
            padding: 0px;
            li {
                
                img {
                    margin: 0px auto;
                    padding: 0px;
                    display: block;
                    clear: both;
                    float: none;
                }
                
                .education-experience__list__description {
                   margin: 0px auto;
                   padding: 0px;
                       
                   display: block;
                   clear: both;
                   width: 70%;
                }
            }
        }
        
        .info-section .photos__list {
            padding: 0px;
            margin: 0px auto;           
            overflow: hidden;
            li {
//              *, *:before, *:after {
                * {
                    box-sizing: border-box;
                }
                img {
                    float: none;
                    display: block;
                    width: 100%;
                }
            }
        }
        
        .info-section .get-in-touch__list {
            list-style: none;
            padding: 0px;
            margin: 0px auto;           
            overflow: hidden; 
            * {
                box-sizing: border-box;
            }
            li {
                float: left;
                display: block;
                width: 50%;
                
                text-align: center;
            }
        }
        
        .contact {

        form {
            width: 100%;
            margin: 10px auto;
            div {
                position: relative;
                text-align: left;
            }   
        }
        input, textarea {
            margin: 10px auto;
            padding: 5px 0px;
            border: 1px solid #ccc;
            border-radius: 4px;
            top: 0%;
            left: 100%;
            width: 100%;
        }  
        
        label {
            position: static;
            top: 0%;
            left: 100%;
            margin: 0px auto;
        }
    }        
       
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}